<template>
    <view class="w-[100%] py-[20rpx] relative">
        <image src="@/static/images/icon/card.png" class="w-[100%] top-0 absolute right-0 h-[100%]" />
        <!-- <view class="right_top">
            核返单
        </view> -->
      
        <view class="w-[360rpx] h-[104rpx] topBtn px-[32rpx] py-[12rpx] ml-[-12rpx] relative"
            style="border-radius: 12rpx 12rpx 12rpx 0rpx;background: linear-gradient( 180deg, #000000 0%, #585858 100%);">
            <image src="@/static/images/icon/car.png"
                class="w-[210rpx] z-[1] absolute top-[26rpx] right-[10rpx] h-[47rpx]" />
            <view class="text-[28rpx] text-[#fff] mb-[2rpx] font-[500]">
                先生/女士
            </view>
            <view class="text-[28rpx] text-[#fff] flex items-center  mt-[8rpx] font-[500]">
                <image src="@/static/images/icon/time2.png" class="w-[32rpx] h-[32rpx]" />
                <view class="text-[22rpx] ml-[12rpx] font-[400] text-[#CCCCCC]">2020-02-02 12:12:12</view>
            </view>
        </view>
        
        
        <view class="relative w-[100%] px-[24rpx] mt-[30rpx] ">
             
            <view class="text-[rgb(0,0,0)]  text-[28rpx] mt-[20rpx] flex   font-[500]">
                宝马5系 A06
                <view style="line-height: 44rpx;" class="w-[56rpx] h-[44rpx] rounded-[8rpx] text-[20rpx] font-[500] ml-[16rpx] text-[#ffffff] bg-[#FF8900]  text-center  ">赠</view>
            </view>
            <view class="text-[rgb(0,0,0)] flex items-center text-[24rpx] font-[500] mt-[24rpx]">
                <text class="text-[#666]">所在城市：</text>
                <text class="flex-1">湖北武汉</text>
            </view>
            <view class="text-[rgb(0,0,0)] flex items-center text-[24rpx] font-[500] mt-[24rpx]">
                <text class="text-[#666]">联系方式</text>
                <text class="flex-1">187****9235</text>
            </view>
           
        </view>
    </view>
</template>
<script setup></script>
<style lang="scss" scoped>
.btn {
    width: 500rpx;
    height: 96rpx;
    background: linear-gradient(98deg, #000000 0%, #454545 100%);
    border-radius: 16rpx;
}

.gradient-text {
    background: linear-gradient(180deg, #FFE788 0%, #FFF6D7 100%);
    -webkit-background-clip: text;
    font-weight: 600;
    font-size: 32rpx;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.topBtn::after {
    content: '';
    position: absolute;
    width: 12rpx;
    height: 20rpx;
    background: linear-gradient(45deg, #f7f7f7, #f7f7f7 50%, #000000 50%, #000000 100%);
    bottom: -18rpx;
    left: 0;
}

.right_top {
    width: 264rpx;
    height: 104rpx;
    background: linear-gradient(98deg, #FFF8DD 0%, #FFD856 100%);
    border-radius: 16rpx 36rpx 16rpx 16rpx;
    position: absolute;
    top: -10rpx;
    right: 6rpx;
    padding: 4rpx 40rpx;
    font-size: 34rpx;
    color: #000000;
    font-weight: 700;
    text-align: end;
    z-index: -1;
}

.action-btn {
    padding: 12rpx 24rpx;
    background-color: #FFEFB8;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #333;
    text-align: center;
}

.bottom-btn {
    padding: 10rpx 20rpx;
    background-color: #FFFBEB;
    border-radius: 8rpx;
    font-size: 22rpx;
    color: #9C8C57;
    text-align: center;
}

.memo-box {
    background-color: #f9f9f9;
    padding: 16rpx;
    border-radius: 8rpx;
}

.progress-container {
    height: 40rpx;
    background-color: #f0f0f0;
    border-radius: 20rpx;
    position: relative;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: #FFD856;
    border-radius: 20rpx;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24rpx;
    color: #333;
}

.stamp-placeholder {
    position: absolute;
    bottom: 20rpx;
    right: 30rpx;
    width: 120rpx;
    height: 120rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stamp-image {
    width: 100%;
    height: 100%;
    opacity: 0.8;
}
</style>